<script setup>
import { ref } from "vue";

const props = defineProps({
  items: { type: Array, required: true },
  storageKey: { type: String, default: "tour-guide-completed" },
  type: { type: String, default: "primary" },
  mask: {
    type: [Boolean, Object],
    default: () => ({
      style: { boxShadow: "0 0 0 4px #b3d8ff44" },
      color: "rgba(0, 0, 0, 0.5)",
    }),
  },
  zIndex: { type: Number, default: 3000 },
  modelValue: Boolean,
  current: Number,
});

const emit = defineEmits(["change"]);

const showTour = ref(false);
const tourStep = ref(0);

function finishTour() {
  showTour.value = false;
  localStorage.setItem(props.storageKey, "1");
}

function handleStepChange(current) {
  tourStep.value = current;
  emit("change", current);
}
function open() {
  showTour.value = true;
  tourStep.value = 0;
}
defineExpose({ open });
</script>

<template>
  <el-tour
    v-model="showTour"
    :current="tourStep"
    @change="handleStepChange"
    @finish="finishTour"
    @close="finishTour"
    :type="type"
    :mask="mask"
    :z-index="zIndex"
    :prev-button-props="tourStep === items.length - 1 ? { show: false } : {}"
    :show-arrow="true"
    :show-close="true"
    :scroll-into-view-options="false"
    class="toolbox-tour"
  >
    <el-tour-step
      v-for="(item, idx) in items"
      :key="idx"
      :target="item.target"
      :title="item.title"
      :description="item.description"
      :placement="item.placement || 'bottom'"
      :type="type"
      :mask="mask"
    />
  </el-tour>
</template>

<style scoped lang="scss">
:deep(.toolbox-tour) {
  .el-tour__content {
    background: linear-gradient(135deg, #f6faff 0%, #e3f0ff 100%);
    border: 1.5px solid #409eff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(64, 158, 255, 0.15);

    .el-tour__header {
      background: linear-gradient(135deg, #e3f0ff 0%, #b3e0ff 100%);
      border-radius: 16px 16px 0 0;
      border-bottom: 1px solid #b3d8ff;
      .el-tour__title {
        color: #1976d2;
        font-weight: bold;
        font-size: 16px;
      }
    }

    .el-tour__body {
      padding: 16px;
      .el-tour__description {
        color: #409eff;
        font-size: 14px;
        line-height: 1.5;
      }
    }

    .el-tour__footer {
      background: #f6faff;
      border-radius: 0 0 16px 16px;
      border-top: 1px solid #e0eaff;
      padding: 12px 16px;
      .el-button {
        background: #409eff;
        border-color: #409eff;
        color: white;
        border-radius: 8px;
        font-weight: 500;
        &:hover {
          background: #1976d2;
          border-color: #1976d2;
        }
      }
    }
  }
  .el-tour__arrow {
    &::before {
      background: linear-gradient(135deg, #f6faff 0%, #e3f0ff 100%);
      border: 1.5px solid #409eff;
    }
  }
}
</style>
